<template>
	<view @click="onClick()" class="uni-coupon-box">
		<view class="coupon-item">
			<view class="coupon-content">
				<view class="type-name-box">
					<view
						:style="{ color: option.canUseColor || canUseColor }"
						class="name"
						>{{ coupon.couponName }}</view
					>
					<text
						:style="{ color: option.canUseColor || canUseColor }"
						class="desc"
						>{{ coupon.content }}</text
					>
				</view>
				<view
					:style="{
						color: option.canUseMainColor || canUseMainColor
					}"
					class="discount-box"
				>
					<view
						:class="option.couponType || couponType"
						class="num"
						>{{ coupon.discounts }}</view
					>
				</view>
				<!-- 泡泡 begin -->
				<text
					:style="{
						'background-color':
							option.canUseMainColor || canUseMainColor
					}"
					class="bubble bubble-small"
				></text>
				<text
					:style="{
						'background-color':
							option.canUseMainColor || canUseMainColor
					}"
					class="bubble bubble-large"
				></text>
				<!-- 泡泡 end -->
				<!-- 已抢光 begin -->
				<view 
					v-if="option.showRobbedNone"
					class="robbed-none">
					<image class="zz-img-fit" :src="`${baseCommonFileUri}image/coupon_complete_icon.png`"></image>
				</view>
				<!-- 已抢光 end -->
			</view>
			<view class="coupon-meta">
				<view
					:style="{ color: option.canUseColor || canUseColor }"
					class="coupon-meta__left"
					>{{ coupon.startTime }} 至 {{ coupon.endTime }}</view
				>
				<view class="coupon-meta__right">
					<slot class="meta-right">
						<text
							:style="{
								color: option.canUseMainColor || canUseMainColor
							}"
							class="text"
							>{{ option.metaRightText || metaRightText }}</text
						>
						<uni-icon
							:color="canUseColor"
							name="right"
							size="24rpx"
						>
						</uni-icon>
					</slot>
				</view>
				<text class="dot dot-left"></text>
				<text class="dot dot-right"></text>
			</view>
		</view>
		<!-- <image
      :src="bgImage || option.bgImage"
      class="coupon-bg"
    ></image> -->
	</view>
</template>

<script>
import { recevieCoupon } from "@/lib/api/couponServer/customer";

import uniIcon from "@/components/uniIcon/uniIcon";
export default {
	component: {
		uniIcon
	},
	props: {
		// 优惠券对象
		coupon: {
			type: Object,
			default() {
				return {};
			}
		},

		option: {
			type: Object,
			default() {
				return {
					// bgImage: "",
					couponType: "",
					metaRightText: "",
					canUseColor: "",
					canUseMainColor: "",
					showRobbedNone:false  //显示“已抢光”标识
				};
			}
		},

		// 优惠券类型：price: 金额; amcount: 折扣
		couponType: {
			type: String,
			default() {
				return "";
			}
		},

		// 优惠券meta右侧文字
		metaRightText: {
			type: String,
			default() {
				return "";
			}
		},

		// //  优惠券背景图
		// bgImage: {
		// 	type: String,
		// 	default() {
		// 		return "";
		// 	}
		// },

		// 优惠券可 用/领取颜色
		canUseColor: {
			type: String,
			default: ""
		},

		canUseMainColor: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			receiving: false,
			privateCouponList: []
		};
	},

	//   watch: {
	//     couponItem: {
	//       handler: function(val, oldVal) {
	//         this.privateCouponItem = JSON.parse(JSON.stringify(val));
	//       },
	//       deep: true
	//     }
	//   },

	methods: {
		onClick() {
			this.$emit("click", this.coupon);
		},

		goGoodsList() {
			uni.switchTab({
				url: "/pages/tabbar/category"
			});
		},

		deleteCoupon() {}
	}
};
</script>

<style lang="scss" scoped>
.uni-coupon-box {
	position: relative;
	margin-bottom: 24rpx;
	.coupon-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		z-index: 1;
	}
	.coupon-item {
		position: relative;
		background-color: $theme-panel-bg-color;
		z-index: 9;
		width: 100%;
		height: 286rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 0 28rpx 0 rgba(204, 204, 204, 0.4);
		.coupon-content {
			width: 100%;
			padding: 32rpx 48rpx 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.type-name-box {
				.name {
					font-size: $theme-size-large-base;
					font-weight: bold;
					color: $theme-color-main-base;
				}
				.desc {
					margin-top: 12rpx;
					font-size: 22rpx;
					font-weight: $theme-color-base;
				}
			}

			.discount-box {
				color: $theme-color-ghost-base;
				.num {
					font-weight: bold;
					font-size: 80rpx;
					&.price::before {
						content: "￥";
						font-size: 36rpx;
					}

					&.amount::before {
						content: "%";
						font-size: 36rpx;
					}
				}
			}

			/** 泡泡 begin */
			.bubble {
				position: absolute;
				border-radius: 100%;
				opacity: 0.09;
				background-color: $theme-color-ghost-base;
			}

			.bubble.bubble-small {
				top: 14rpx;
				right: 56rpx;
				height: 24rpx;
				width: 24rpx;
			}

			.bubble.bubble-large {
				top: 40rpx;
				right: 126rpx;
				height: 104rpx;
				width: 104rpx;
			}
			/** 泡泡 end */
			/* 已抢光 begin */
			.robbed-none {
				position:absolute;
				top:82rpx;
				right:204rpx;
				width:156rpx;
				height:136rpx;
				/* background-color:red; */
			}
			/* 已抢光 end */
		}

		.coupon-meta {
			position: relative;
			padding: 34rpx 48rpx;
			border-top: 2rpx dashed #cccccc80;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&__left {
				font-size: 22rpx;
				color: $theme-color-base;
			}
			&__right {
				font-size: $theme-size-small-base;
				color: $theme-color-ghost-base;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.dot {
			position: absolute;
			height: 24rpx;
			width: 24rpx;
			background-color: $theme-main-bg-color;
		}

		.dot.dot-left {
			top: -12rpx;
			left: -12rpx;
			border-radius: 0 24rpx 24rpx 0;
		}

		.dot.dot-right {
			top: -12rpx;
			right: -12rpx;
			border-radius: 24rpx 0 0 24rpx;
		}
	}
}
</style>
